<template>
  <div>
    <Space wrap>
      <tiny-alert size="large" title=" " class="demo-alert w-full shrink-0">
        <tiny-scroll-text class="w-full" text="欢迎回家!!!" :speed="100" :time="30">
        </tiny-scroll-text>
      </tiny-alert>
      <tiny-carousel height="400px" class="flex-1">
        <tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
          <Image :src="`https://picsum.photos/990/540`" fit="cover" class="h-full w-full" />
        </tiny-carousel-item>
      </tiny-carousel>
      <Flex gap="20px">
        <Card class="flex-1">
          <template #header> 访问量 </template>
          <tiny-chart-line :options="options"></tiny-chart-line>
        </Card>
        <Card class="flex-1">
          <template #header> 用户访问 </template>
          <tiny-chart-line :options="options2"></tiny-chart-line>
        </Card>
      </Flex>

      <Flex gap="20px" wrap>
        <Card>
          <template #header> <div>📝 用户反馈</div></template>
          <div class="card-content">
            <p>用户反馈显示对产品整体满意度较高，主要建议集中在以下方面：</p>
            <ul class="pl-20 my-15">
              <li>移动端体验优化</li>
              <li>增加个性化设置选项</li>
              <li>改进文档和教程资源</li>
            </ul>
            <p>我们已将这些建议纳入产品路线图，将在下一季度优先解决。</p>
          </div>
          <template #footer>
            <Flex justify="end">
              <div>共收集反馈: 142 条</div>
            </Flex>
          </template>
        </Card>
        <Card>
          <template #header> <div>🌟 项目概览</div></template>
          <div class="card-content">
            <p>
              当前项目进度顺利，团队已完成所有关键里程碑。下一步将专注于优化用户体验和性能提升。
            </p>
            <div
              class="progress-bar"
              style="background: #e0e0e0; height: 10px; border-radius: 5px; margin: 15px 0"
            >
              <div style="width: 75%; background: #2ecc71; height: 100%; border-radius: 5px"></div>
            </div>
            <p>项目完成度: 75%</p>
          </div>
          <template #footer>
            <Flex justify="end">
              <tiny-button type="primary" text>查看详情</tiny-button>
              <tiny-button type="warning" text>分享</tiny-button>
            </Flex>
          </template>
        </Card>
        <Card class="flex-1 h-[400px]">
          <tiny-bulletin-board :tab-title="tabTitle" :data="data"></tiny-bulletin-board>
        </Card>
        <Card class="flex-1 h-[400px]">
          <template #header> 📊 数据分析报告 </template>
          <div class="card-content">
            <p>本报告展示了关键业务指标的最新数据趋势和重要见解，帮助您做出明智决策。</p>
            <Flex align="center" justify="around">
              <div class="stat-item">
                <div class="h-[44px] text-2xl font-bold">24.7%</div>
                <div class="stat-label">增长率</div>
              </div>
              <div class="stat-item">
                <div class="h-[44px] text-2xl font-bold">1,284</div>
                <div class="stat-label">新用户</div>
              </div>
              <div class="stat-item">
                <div class="h-[44px] text-2xl font-bold">89%</div>
                <div class="stat-label">满意度</div>
              </div>
            </Flex>
          </div>
          <template #footer> <div class="text-end">最后更新: 2023年6月15日</div> </template>
        </Card>
      </Flex>
    </Space>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue-huicharts';
const options = ref({
  data: [
    { Month: 'Jan', member: 33, Abroad: 1 },
    { Month: 'Feb', member: 27, Abroad: 39 },
    { Month: 'Mar', member: 31, Abroad: 20 },
    { Month: 'Apr', member: 30, Abroad: 15 },
    { Month: 'May', member: 37, Abroad: 1 },
    { Month: 'Jun', member: 36, Abroad: 17 },
    { Month: 'Dec', member: 32, Abroad: 1 },
  ],
  xAxis: 'Month',
  yAxis: {
    name: 'Percent(%)',
  },
});

const options2 = ref({
  padding: [50, 30, 50, 20],
  smooth: true, // smooth 属性配置曲线
  legend: {
    show: true,
    icon: 'line',
  },
  data: [
    { Month: 'Jan', member: 330 },
    { Month: 'Feb', member: 207 },
    { Month: 'Mar', member: 380 },
    { Month: 'Apr', member: 300 },
    { Month: 'May', member: 307 },
    { Month: 'Jun', member: 360 },
    { Month: 'Oct', member: 400 },
    { Month: 'Nov', member: 420 },
    { Month: 'Dec', member: 302 },
  ],
  xAxis: {
    data: 'Month',
    name: 'Time',
  },
  yAxis: {
    name: '',
  },
});

const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性']);
const data = ref([
  [
    {
      text: 'TINY v2.1.4 版本',
      date: '2019-07-31',
      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
      target: '_blank',
    },
    {
      text: 'TINY v2.1.3 版本',
      date: '2019-06-11',
      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
      target: '_blank',
    },
    {
      text: 'TINY v2.1.2 版本',
      date: '2019-05-11',
      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
      target: '_blank',
    },
  ],
  [
    {
      text: 'SRM 采购云',
      date: '2018-09-11',
      url: 'http://abcdf.com',
      target: '_blank',
    },
    {
      text: 'iSales',
      url: 'http://abcdf.com',
      date: '2018-09-11',
      route: 'Alert',
    },
    {
      text: '数易平台',
      url: 'http://abcdf.com',
      date: '2018-09-11',
    },
    {
      text: 'MES+ 制造平台',
      date: '2018-09-11',
      url: 'http://abcdf.com',
      target: '_blank',
    },
    {
      text: 'ISDP',
      date: '2018-09-11',
      url: 'http://abcdf.com',
      route: 'Alert',
    },
    {
      text: '财经智慧助手',
      url: 'http://abcdf.com',
      date: '2018-09-11',
    },
  ],
  [
    {
      text: '秒级系统体验，按需打包；一致 UX 体验规范',
      date: '2018-09-11',
      url: 'localhost:3000/#/zh-CN/index',
      target: '_blank',
    },
    {
      text: '内置公共 API 并支持扩展；组件、主题均可扩展',
      date: '2018-09-11',
      url: 'localhost:3000/#/zh-CN/index',
    },
    {
      text: '丰富教程案例、FAQ、开源组件快速引入',
      date: '2018-09-11',
      url: 'localhost:3000/#/zh-CN/index',
    },
    {
      text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
      url: 'localhost:3000/#/zh-CN/index',
      date: '2018-09-11',
    },
  ],
]);
</script>

<style scoped></style>
